<template>
  <ul class="sorts">
    <li v-for="i in list" :key="i.id">
      <img :src="getRequire(i.url)" alt="" />
      <span class="nav_til">{{ i.til }}</span>
    </li>
  </ul>
</template>

<script setup>
import { ref,onMounted } from "vue";
import { getRequire } from '../../utils/index.js'
import axios from "axios";
const list = ref([]);

const fetchData = async () => {
	const res = await axios.get('/api/index')
	list.value = res.data.data.nav
}

onMounted(() => {
	fetchData()
})
</script>

<style scoped>
	.sorts {
		width: 100%;
		background-color: white;
		font-size: 0.35rem;
		box-sizing: border-box;
		display: flex;
		flex-flow: row wrap;
		margin-top: 1.25rem;
	}

	.sorts li {
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		flex: 0 0 20%;
		margin: 0.3rem 0;
	}

	.sorts li img {
		width: 1.5rem;
		height: 1.5rem;
	}

	.sorts li span {
		margin-top: 0.1875rem;
		color: rgb(102, 102, 102);
	}
</style>
